<!--
 * @Descripttion: 
 * @version: 
 * @Author: ada.wu
 * @Date: 2023-07-26 16:36:44
 * @LastEditors: ada.wu
 * @LastEditTime: 2023-11-04 18:40:19
-->
<template>
  <el-container class="app_container">
    <el-row class="w100">
      <el-col :span="4" class="platform-bg edu-bg">
        <div class="ep-bg-purple">
          <img src="@/assets/img/logo.png" alt="logo" />
          <div class="line"></div>
          <div class="platform-title">
            <div>EDU综合管理</div>
            <div>服务平台</div>
          </div>
        </div>
      </el-col>
      <el-col :span="20">
        <el-row class="w100">
          <el-col :span="8" class="platform-bg control-bg" @mouseenter="handleMouseover(0)" @mouseleave="handleMouseout(0)">
            <div class="hover-bg">
              <div class="grid-content">
                <div class="icon-bg">
                  <img v-show="getRotateImg(0)" class="rotateImg" :src="`${getRotateImg(0)}?${Date.now()}`" width="130" v-cloak />
                  <img :src="`${getImg(0)}?${Date.now()}`" width="100" v-cloak />
                </div>
                <div class="platform-title">管控平台 </div>
                <div class="platform-ename">CONTROL PLATFORM</div>
              </div>
            </div>
          </el-col>
          <el-col :span="8" class="platform-bg resource-bg" @mouseenter="handleMouseover(1)" @mouseleave="handleMouseout(1)">
            <div class="hover-bg">
              <div class="grid-content">
                <div class="icon-bg">
                  <img v-show="getRotateImg(1)" class="rotateImg" :src="`${getRotateImg(1)}?${Date.now()}`" width="130" v-cloak />
                  <img :src="`${getImg(1)}?${Date.now()}`" width="100" v-cloak />
                </div>
                <div class="platform-title">资源平台</div>
                <div class="platform-ename">RESOURCE PLATFORM </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8" class="platform-bg supervision-bg" @mouseenter="handleMouseover(2)" @mouseleave="handleMouseout(2)">
            <div class="hover-bg">
              <div class="grid-content">
                <div class="icon-bg">
                  <img v-show="getRotateImg(2)" class="rotateImg" :src="`${getRotateImg(2)}?${Date.now()}`" width="130" v-cloak />
                  <img :src="`${getImg(2)}?${Date.now()}`" width="100" v-cloak />
                </div>
                <div class="platform-title">督导平台</div>
                <div class="platform-ename">SUPERVISION PLATFORM</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>

    </el-row>
  </el-container>
</template>

<script  setup>
import { ref, onMounted } from "vue";

const rotateImg = ref("./images/platform/rotate.png",)


const dataList = ref([{
  img: "./images/platform/control.png",
  img1: "./images/platform/control-icon.png",
  show: false,
}, {
  img: "./images/platform/resource.png",
  img1: "./images/platform/resource-icon.png",
  show: false,
}, {
  img: "./images/platform/supervision.png",
  img1: "./images/platform/supervision-icon.png",
  show: false,
}]);

onMounted(() => {
});

const getImg = (index) => {
  if (dataList.value[index].show) {
    return dataList.value[index].img1;
  } else {
    return dataList.value[index].img;
  }
};
const getRotateImg = (index) => {
  if (dataList.value[index].show) {
    return rotateImg.value
  } else {
    return ''
  }
};
const handleMouseover = (index) => {
  dataList.value[index].show = true;
};
const handleMouseout = (index) => {
  dataList.value[index].show = false;
};

</script>


<style lang="less" scoped>
.rotateImg {
  position: absolute;
}
.platform-bg {
  position: relative;
  height: 100vh;
  background-color: #060e39;
  background-size: 100% 100%;
  background-size: cover;
  background-position: center; //背景图片居中显示，让多余部分相对容器对此展示
  background-repeat: no-repeat;
  cursor: pointer;
}
.ep-bg-purple {
  padding-left: 2.5rem;
  padding-top: 7rem;
  img {
    width: 79px;
    height: 79px;
  }
  .line {
    background: @base-color;
    height: 4px;
    width: 38px;
    border-radius: 20px;
    margin-top: 4rem;
  }
}
.edu-bg {
  background-image: url("@/assets/img/platform/edu-bg.png");
}
.control-bg {
  background-image: url("@/assets/img/platform/control-bg.png");
}
.resource-bg {
  background-image: url("@/assets/img/platform/resource-bg.png");
}
.supervision-bg {
  background-image: url("@/assets/img/platform/supervision-bg.png");
}
.icon-bg {
  width: 88px;
  height: 88px;
  border-radius: 100px;
  line-height: 88px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.control-bg:hover,
.resource-bg:hover,
.supervision-bg:hover {
  .hover-bg {
    width: 100%;
    height: 100vh;
    transition: all 0.2s ease-in-out;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #0db895);
  }
}

.platform-title {
  padding-top: 4rem;
  font-size: 36px;
  font-weight: 400;
}
.platform-ename {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.37);
  padding-top: 2rem;
}
.grid-content {
  position: fixed;
  bottom: 0px;
  padding-left: 5em;
  padding-bottom: 10em;
}

@media (min-width: 576px) {
  .ep-bg-purple {
    padding-left: 0.5rem;
  }
  .grid-content {
    padding-left: 1rem;
  }
  .platform-title {
    padding-top: 3rem;
    font-size: 16px;
  }
}

@media (min-width: 768px) {
  .ep-bg-purple {
    padding-left: 1rem;
  }
  .grid-content {
    padding-left: 1.5rem;
  }
  .platform-title {
    padding-top: 3rem;
    font-size: 18px;
  }
}

@media (min-width: 992px) {
  .platform-title {
    padding-top: 3rem;
    font-size: 24px;
  }
}

@media (min-width: 1200px) {
  .platform-title {
    padding-top: 3rem;
    font-size: 28px;
  }
}

@media (min-width: 1400px) {
  .ep-bg-purple {
    padding-left: 2.5rem;
    padding-top: 7rem;
  }
  .platform-title {
    padding-top: 4rem;
    font-size: 36px;
    font-weight: 400;
  }
  .platform-ename {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.37);
    padding-top: 2rem;
  }
  .grid-content {
    position: fixed;
    bottom: 0px;
    padding-left: 5em;
    padding-bottom: 10em;
  }
}
</style>